<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			0.分析页面结构 
			1.先写html结构
			2.再写样式
			注意：分析页面是否包含移动端
			
			
			*/
				
			body{
				margin: 0;
				padding: 0;
			}
		   
			.nav{
				width: 100%;
				display: flex;
				height: 44px;
				background: #808080;
				justify-content: center;
				align-items: center;
			}
			.nav a{
				width: 100px;
				color: #FFFFFF;
				text-align: center;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="" class="logo"></a>
			<a href="" class="text">MAC</a>
			<a href="" class="text">IPAD</a>
			<a href="" class="text">IPHONE</a>
			<a href="" class="text">WATCH</a>
			<a href="" class="text">WATCH</a>
			<a href="" class="text">TV</a>
			<a href="" class="text">MUSIC</a>
			<a href="" class="search"></a>
			<a href="" class="box"></a>
			
			<input hidden="hidden" type="checkbox" name="choose" id="choose" value="" />
			<label for="choose" class="toggleBtn">
				<span class="line"></span>
				<span class="line"></span>
			</label>
		</div>
	</body>
</html>
